<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useResponsive } from '@/composables/useResponsive'

// Initialize responsive composable
const { getResponsiveClasses, getDeviceClass } = useResponsive()
</script>

<template>
  <div id="app" :class="[getResponsiveClasses(), getDeviceClass()]">
    <RouterView />
  </div>
</template>

<style>
/* Global responsive styles */
#app {
  height: 100vh;
  overflow: hidden;
}

/* Device-specific global styles */
.device-mobile {
  font-size: 14px;
}

.device-tablet {
  font-size: 14px;
}

.device-desktop {
  font-size: 16px;
}

/* Touch device optimizations */
.is-touch {
  /* Increase touch target sizes */
  button, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Responsive utilities */
.mobile-only {
  display: block;
}

.tablet-only,
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-only {
    display: block;
  }
}

@media (min-width: 1024px) {
  .tablet-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* Layout utilities */
.container-mobile {
  padding: 0 12px;
}

.container-tablet {
  padding: 0 16px;
}

.container-desktop {
  padding: 0 24px;
}

/* Responsive text sizes */
.text-responsive {
  font-size: 14px;
}

@media (min-width: 768px) {
  .text-responsive {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .text-responsive {
    font-size: 18px;
  }
}
</style>
